<template>
    <div id="main">
<!--        <transition :name="transitionName">-->
            <keep-alive v-if="!$route.meta.notAlive">
                <router-view></router-view>
            </keep-alive>

                <router-view v-if="$route.meta.notAlive"></router-view>

<!--        </transition>-->
        <!--    <Home></Home>-->
        <!--    <Cart></Cart>-->
        <!--      <Commit></Commit>-->
        <!--      <Detail></Detail>-->
        <!--      <Address></Address>-->
        <!--      <AddressEdit></AddressEdit>-->
        <!--      <Type></Type>-->
        <!--      <Notice></Notice>-->
        <tabBar v-if="nowPath!='/lottery'" :tabs="tabs" :path="path"></tabBar>
    </div>
</template>

<script>
    import Detail from '@/pages/detail/index'
    import Cart from '@/pages/cart/index'
    import Commit from '@/pages/commit/index'
    import Address from '@/pages/address/index'
    import Manage from '@/pages/goodsmanage/index'
    import AddressEdit from '@/pages/address/edit'
    import Type from '@/pages/type/index'
    import Notice from '@/pages/notice/index'
    import tabBar from '@/components/tab-bar/index'
    import {testLogin} from "@/api/login"
    import {setToken} from "@/util/cookie";
    import {list} from "@/api/cart";
    import {mapState} from 'vuex'

    export default {
        name: 'app',
        created() {
            this.nowPath = this.$route.path

            // testLogin(1).then(res=>{
            //     setToken(res.data)
            // })
        },
        computed:{
          ...mapState({
              mallCartCount: state=>state.mall.cartCount
          }),
          tabs(){
              return [
                  {
                      name: "首页",
                      icon: 'iconhome1',
                      path: '/home'
                  },
                  {
                      name: "分类",
                      icon: 'icontubiao-1',
                      path:'/type/classify'
                  },

                  {
                      name: "客户",
                      icon: 'iconlianxiren2',
                      path: '/user'
                  },
                  // {
                  //     name: "消息",
                  //     icon: 'iconxiaoxi',
                  //     path: '/notice',
                  //     badge:"1"
                  // },
                  {
                      name: "购物车",
                      icon: 'icongouwuche',
                      path: '/cart',
                      badge: this.mallCartCount
                  },
                  {
                      name: "我的",
                      icon: 'iconmy',
                      path: '/my'
                  }
              ]
          }
        },
        data() {
            return {

                transitionName: 'slide-left',
                paths: [],
                path:null,
                nowPath:null
            }
        },
        components: {
             Detail, Cart, Commit, Address, AddressEdit, Type, tabBar,Manage
        },
        beforeRouteUpdate(to, from, next) {
            //修改tab
            this.path = to.path
            // const toDepth = to.path.split('/').length
            // const fromDepth = from.path.split('/').length
            // this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
            this.transitionName = 'slide-left'
            if (this.paths.length > 0 && to.path == this.paths[this.paths.length - 1]) {
                this.transitionName = 'slide-right'
                this.paths.pop()
            } else {
                this.paths.push(from.path)
            }

            next()
        }
    }
</script>

<style lang="stylus">
    #main
        height 100%

    .slide-left-enter-active,
    .slide-left-leave-active,
    .slide-right-enter-active,
    .slide-right-leave-active {
        /*will-change: transform;*/
        transition: all 300ms;
        /*height: 100%;*/
        top: 0;
        position: absolute;
        /*backface-visibility: hidden;*/
        /*perspective: 1000;*/
    }

    .slide-left-enter {
        opacity: 0;
        transform: translateX(100%);
    }

    .slide-left-leave-active {
        opacity: 0;
        transform: translateX(-100%);
    }

    .slide-right-enter {
        opacity: 0;
        transform: translateX(-100%);
    }

    .slide-right-leave-active {
        opacity: 0;
        transform: translateX(100%);
    }

    #app {
        height: 100%;
    }
</style>
